<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html >
<html>
<head>
<base href="${BaseContext }">
<meta charset="UTF-8">
<title>js/jquery专项</title>
<link rel="stylesheet" href="http://cdn.amazeui.org/amazeui/2.7.2/css/amazeui.min.css" />

</head>
<body>
	<div class="am-container dataDiv">
		<section class="am-panel am-panel-primary">
			<header class="am-panel-hd">
				<h3 class="am-panel-title">考试功能演示</h3>
			</header>
			<div class="am-panel-bd" id="div">
				<table class="am-table am-table-bordered am-text-center">
					<thead>
						<tr>
							<th colspan="3">
								<button title="点击此按钮刷新下方表格数据，ajax处理" class="am-btn am-btn-primary" id="refresh">刷新数据</button>
							</th>
						</tr>

					</thead>
					<tbody>
						<c:forEach items="${jsM }" var="jM">
							<tr>
								<td><input type="checkbox" name="td" id="td"></td>
								<td id="name" name="name" value="${jM.name }">${jM.name }</td>
								<td id="age" name="age" value="${jM.age }">${jM.age }岁</td>
							</tr>
						</c:forEach>
						<tr>

							<td colspan="3">
								<button class="am-btn am-btn-primary" title="点击后将所有数据的checkbox修改为选中状态" id="allin">全选</button>
								<button class="am-btn am-btn-primary" title="点击后将所有数据的checkbox修改为未选中状态" id="notAllIn">全不选</button>
								<button class="am-btn am-btn-primary" title="点击后，已选择的checkbox改为未选择，未选择的checkbox改为已选择"
									id="fals">反选</button>
								<button class="am-btn am-btn-warning" title="点击后提交已选择数据的value值" id="tijiao">提交已选择数据</button>
							</td>
						</tr>
					</tbody>
				</table>
				<div>
					<p id="p1">点击提交按钮后，如果未选择任何数据，在这里打印提示信息，提示用户先选择数据再提交</p>
					<p id="p2">如果已选择数据，则提交并且在后台打印提交的所有数据。然后将当前项目的运行路径获取并且返回，在这里显示了</p>
				</div>
			</div>
		</section>
	</div>
	<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
	<script src="http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.min.js"></script>
	<script src="static/js/jquery.form.min.js"></script>
	<script type="text/javascript">
		$(function() {
			var select = document.getElementsByName('td');
			$('#refresh').click(function() {
				$.post('js.do', function(data) {
					if (data.success) {
						alert('我对了');
						location.reload();
					} else {
						console.log('我错了');
					}
				}, 'json')
			});
			$('#allin').click(function() {
				var check = "checked='checked'";
				console.log('00000');
				for (var i = 0; i < select.length; i++) {
					select[i].checked = true;
				}
			});
			$('#notAllIn').click(function() {
				console.log('00000');
				for (var i = 0; i < select.length; i++) {
					select[i].checked = false;
				}
			});
			$('#fals').click(function() {
				console.log('00000');
				for (var i = 0; i < select.length; i++) {
					if (select[i].checked == true) {
						select[i].checked = false;
					} else {
						select[i].checked = true;
					}

				}
			});
			$('#tijiao').click(function() {
				console.log('00000');
				for (var i = 0; i < select.length; i++) {
					console.log(select[i].checked);
					if (select[i].checked == true) {
						console.log($(this).attr('#name') + "," +$(this).attr('#age'));
						$.post('query.do', {
							name : $(this).attr('#name'),
							age : $(this).attr('#age')
						}, function(data) {
							if (data.success) {
								$('#p2').html('提交成功！！！');
							} else {
								$('#p2').html('提交失败！！！');
							}
						}, 'json');
					}
				}
				console.log(2222);
				$('#p1').html('请选择数据在进行提交！！！');
				console.log(3333);
			});
		});
	</script>
</body>

</html>